<template>
  <div class="home">
    <el-row :gutter="20">
      <!-- 欢迎信息卡片 -->
      <el-col :span="24">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <HomeFilled/>
              </el-icon>
              <span>欢迎使用实验室资产管理系统</span>
            </div>
          </template>
          <div class="welcome-content">
            <p>您好！欢迎来到实验室资产管理系统用户端。</p>
            <p>您可以在这里查看资产列表、进行资产借用、管理您的签到记录。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 统计数据卡片 -->
      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <Box/>
              </el-icon>
              <span>资产总数</span>
            </div>
          </template>
          <div class="stat-content">
            <span class="stat-number">{{ borrowStore.totalAssets }}</span>
            <p class="stat-description">个</p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <CircleCheckFilled/>
              </el-icon>
              <span>可用资产数</span>
            </div>
          </template>
          <div class="stat-content">
            <span class="stat-number">{{ borrowStore.availableAssets }}</span>
            <p class="stat-description">个</p>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <CircleCloseFilled/>
              </el-icon>
              <span>借出资产数</span>
            </div>
          </template>
          <div class="stat-content">
            <span class="stat-number">{{ borrowStore.borrowedAssets }}</span>
            <p class="stat-description">个</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 快捷操作卡片 -->
      <el-col :span="12">
        <el-card class="action-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <Operation/>
              </el-icon>
              <span>快捷操作</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="action-item" @click="goToAssetList">
                <el-icon style="font-size: 30px; color: #409EFF;">
                  <List/>
                </el-icon>
                <p>查看资产列表</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="action-item" @click="goToBorrow">
                <el-icon style="font-size: 30px; color: #67C23A;">
                  <Document/>
                </el-icon>
                <p>进行资产借用</p>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="action-item" @click="goToSignManage">
                <el-icon style="font-size: 30px; color: #E6A23C;">
                  <Edit/>
                </el-icon>
                <p>签到管理</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 最近借用记录卡片 -->
      <el-col :span="12">
        <el-card class="borrow-card">
          <template #header>
            <div class="card-header">
              <el-icon>
                <Clock/>
              </el-icon>
              <span>最近借用记录</span>
            </div>
          </template>
          <el-table :data="borrowStore.recentBorrowingRecords" style="width: 100%">
            <el-table-column prop="assetName" label="资产名称" width="200"/>
            <el-table-column prop="borrowTime" label="借用日期" width="220" :formatter="formatBorrowTime"/>
            <el-table-column prop="actualReturnTime" label="归还日期" width="220" :formatter="formatReturnTime"/>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {
  Box,
  CircleCheckFilled,
  CircleCloseFilled,
  Clock,
  Document,
  Edit,
  HomeFilled,
  List,
  Operation
} from '@element-plus/icons-vue';
import DateFormat from '@/utils/DateFormat';
import {useBorrowStore} from '@/stores/user/borrow.js';

const router = useRouter();
const borrowStore = useBorrowStore();

onMounted(() => {
  borrowStore.fetchStats();
  borrowStore.fetchRecentBorrowingRecords();
});

const goToAssetList = () => {
  router.push('/user/assets');
};

const goToBorrow = () => {
  router.push('/user/borrow');
};

const goToSignManage = () => {
  router.push('/user/signManage');
};

const formatBorrowTime  = (row) => {
  return DateFormat.format(row.borrowTime)
}
const formatReturnTime  = (row) => {
  return DateFormat.format(row.actualReturnTime)
}
</script>

<style scoped>
.home {
  padding: 20px;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.card-header .el-icon {
  margin-right: 5px;
}

/* 欢迎卡片样式 */
.welcome-card {
  border-radius: 10px;
}

.welcome-content {
  padding: 15px;
  line-height: 1.8;
  color: #666;
}

/* 统计卡片样式 */
.stat-card {
  border-radius: 10px;
  text-align: center;
}

.stat-content {
  font-size: 30px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.stat-description {
  font-size: 14px;
  color: #999;
}

/* 快捷操作卡片样式 */
.action-card {
  border-radius: 10px;
}

.action-item {
  text-align: center;
  cursor: pointer;
  padding: 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.action-item:hover {
  background-color: #ecf5ff;
}

/* 借用记录卡片样式 */
.borrow-card {
  border-radius: 10px;
}

/* 表格样式 */
.el-table {
  font-size: 14px;
  color: #666;
}

/* 表格头部样式 */
.el-table thead th {
  background-color: #f5f7fa;
  color: #909399;
  font-weight: 500;
}

/* 表格内容样式 */
.el-table tbody td {
  padding: 12px 0;
}
</style>